// 全局样式
@import './theme.scss';

page {
	height: 100%;
	box-sizing: border-box;
	color: #333333;
	font-size: 28rpx;
	overflow: hidden;

	.app-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: var(--bg-color);
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		
		.flex {
			display: flex;
			align-items: center;
		}
		
		.flex-column {
			display: flex;
			flex-direction: column;
		}
		
		.flex-center {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.flex-1 {
			flex: 1;
			overflow: hidden;
		}
	}
	
	// 图片占满样式
	.cover-image {
		width: 100%;
		height: 100%;
	}
	
	// 解决输入框placeholder悬浮问题
	input{
		position: relative;
		color: #333333;
		
		&::-webkit-input-placeholder {
			position: absolute;
			top: 0;
		}
		
		.input-placeholder {
			color: #CCCCCC;
		}
	}
	
	// 搜索框样式
	.uni-searchbar {
		padding: 0;
		
		.uni-searchbar__box {
			justify-content: flex-start;
			height: 60rpx;
			padding: 0;
			
			.uni-searchbar__box-icon-search {
				padding: 6rpx 20rpx 0 30rpx;
						
				.uniui-search {
					color: var(--gray-font-color) !important;
				}
			}
						
			.uni-searchbar__text-placeholder {
				color: var(--gray-font-color) !important;
				margin: 0;
			}
						
			.uni-searchbar__box-search-input {
				color: var(--default-font-color);
						
				.input-placeholder {
					color: var(--gray-font-color) !important;
				}
			}
		}
	}
	
	// 按钮样式
	button {
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 90rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 20rpx;
		
		&[type=primary] {
			background-color: var(--primary-color);
			color: #FFFFFF;
		}
		
		&[type=default] {
			background-color: #F2F4F7;
			color: #333333;
		}
		
		.icon {
			width: 40rpx;
			height: 40rpx;
		}
		
		&::after {
			border: none;
		}
	}
	
	button[disabled][type=primary] {
		background-color: #CCCCCC;
	}
	
	// 点击的经过样式
	.is-hover {
		background-color: unset;
		border-color: unset;
		opacity: 0.8;
	}
	
	// 单行文本超出隐藏
	.line-1 {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	// 两行文本超出隐藏
	.line-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	// 三行文本超出隐藏
	.line-3 {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	// 底部提交按钮样式
	.submit-box {
		padding: 20rpx 30rpx 0;
		background-color: #FFFFFF;
	
		button {
			margin-bottom: 20rpx;
		}
	}
}